<template>
  <NstdForm :inline="true" :model="formInline" class="demo-form-inline">
    <NstdFormItem label="Approved by">
      <NstdInput v-model="formInline.user" placeholder="Approved by" clearable />
    </NstdFormItem>
    <NstdFormItem label="Activity zone">
      <NstdSelect
        v-model="formInline.region"
        placeholder="Activity zone"
        clearable
      >
        <NstdOption label="Zone one" value="shanghai" />
        <NstdOption label="Zone two" value="beijing" />
      </NstdSelect>
    </NstdFormItem>
    <NstdFormItem label="Activity time">
      <NstdDatePicker
        v-model="formInline.date"
        type="date"
        placeholder="Pick a date"
        clearable
      />
    </NstdFormItem>
    <NstdFormItem>
      <NstdButton type="primary" @click="onSubmit">Query</NstdButton>
    </NstdFormItem>
  </NstdForm>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const options = [
  {
    label: 'Zone one',
    value: 'shanghai',
  },
  {
    label: 'Zone two',
    value: 'beijing',
  }
]
const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {}
</script>

<style>
.demo-form-inline .NstdInput {
  --NstdInput-width: 220px;
}
</style>
